<template>
  <div class="box">
    <div class="top">
      <div class="top-left">
        <div
          style="height: 35%; border-bottom:  1px solid #333; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;"
        >
          <span style="font-weight: bold;font-size: 26px;">系统数据</span>
          <el-row>
            <el-upload
              :show-file-list="false"
              action="customize"
              :http-request="handleIncrease"
              class="upload-file"
            >
              <el-button size="small" type="primary">添加</el-button>
            </el-upload>
          </el-row>
        </div>
        <div
          style="height: 30%; border-bottom:  1px solid #333;font-weight: bold;font-size: 16px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;"
        >
          {{ sysDataTitle }}
        </div>
        <div style="height: 35%;"></div>
      </div>
      <div class="top-right">
        <div
          style="height: 35%; border-bottom:  1px solid #333; display: flex; justify-content: flex-end; align-items: center; padding: 0 10px;position: relative;"
        >
          <span
            style="font-weight: bold;font-size: 26px;position: absolute; left: 10px;"
            >城管数据</span
          >
          <el-button
            @click="handleContrast"
            style="position: absolute; right: 80px"
            type="info"
            >对比</el-button
          >
          <el-row>
            <el-upload
              :show-file-list="false"
              action="customize"
              :http-request="handleIncreaseUrban"
              class="upload-file"
            >
              <el-button size="small" type="primary">添加</el-button>
            </el-upload>
          </el-row>
        </div>
        <div
          style="height: 30%; border-bottom:  1px solid #333;font-weight: bold;font-size: 16px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;"
        >
          {{ urbanDataTitle }}
        </div>
        <div style="height: 35%;"></div>
      </div>
    </div>
    <div class="middle" style="">
      <div
        style="font-weight: bold;font-size: 26px; height: 35%; border-bottom:  1px solid #333; padding: 0 10px; display: flex; justify-content: space-between; align-items:center;"
      >
        去重结果
      </div>
      <div
        style="height: 30%; border-bottom:  1px solid #333;font-weight: bold;font-size: 16px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0 10px; position: relative;"
      >
        <span style="position: absolute;left: 10px;">{{
          deleteRepeatTitle
        }}</span>
        <el-button
          type="primary"
          style="position: absolute; right: 80px"
          @click="handleDownload"
          >下载</el-button
        >
        <el-button type="info" @click="handleDeleRepeat">去重</el-button>
      </div>
      <div style="height: 35%;"></div>
    </div>
    <div class="bottom">
      <div
        style="font-weight: bold;font-size: 26px; height: 35%; border-bottom:  1px solid #333; padding: 0 10px; display: flex; justify-content: space-between; align-items:center;"
      >
        对比结果
      </div>
      <div
        style="height: 30%; border-bottom:  1px solid #333;font-weight: bold;font-size: 16px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;"
      >
        <span>{{ contrastResultTitle }}</span>
        <el-button
          type="primary"
          @click="handleDownloadContrast1"
          style="position: absolute; right: 145px"
          >城管缺失户室</el-button
        >
        <el-button type="primary" @click="handleDownloadContrast2"
          >邦凝缺失户室</el-button
        >
      </div>
      <div
        style="height: 35%;  display: flex; justify-content: space-between; align-items: center; padding: 0 10px;"
      >
        <el-button type="info" @click="deleteAllData">清除全部数据</el-button>
      </div>
    </div>
    <div
      style="height: 25%; border: 1px solid #333; padding: 10px; box-sizing: border-box;"
    >
      <el-row
        style="display: grid; grid-auto-flow: row; justify-content: left; "
      >
        <el-upload
          :show-file-list="false"
          action="customize"
          :http-request="handleIncreaseVillage"
        >
          <el-button size="small" type="primary">小区数据导入</el-button>
        </el-upload>
      </el-row>
      <div>{{ villageDataTitle }}</div>
    </div>
  </div>
</template>
<script>
import NProgress from "nprogress";

export default {
  data() {
    return {
      sysDataTitle: localStorage.getItem("sysDataTitle"),
      urbanDataTitle: localStorage.getItem("urbanDataTitle"),
      deleteRepeatTitle: localStorage.getItem("deleteRepeatTitle"),
      contrastResultTitle: localStorage.getItem("contrastResultTitle"),
      villageDataTitle: ""
    };
  },
  created() {},
  methods: {
    handleIncreaseVillage(params) {
      NProgress.start();
      var file = params.file;
      this.villageDataTitle = file.name.slice(0, file.name.indexOf("."));
      this.villageDataTitle = this.villageDataTitle;
      var formdata = new FormData();
      formdata.append("file", file);
      this.$axios
        .post("/village/household/importHousehold", formdata)
        .then(({ data: res }) => {
          if (res.code != 0) {
            NProgress.done();
            return;
          }
          NProgress.done();
          this.$message.success("上传成功");
        })
        .catch(err => {});
    },
    handleIncrease(params) {
      NProgress.start();
      console.log(params);
      var file = params.file;
      this.sysDataTitle = file.name.slice(0, file.name.indexOf("."));
      localStorage.setItem("sysDataTitle", this.sysDataTitle);
      var formdata = new FormData();
      formdata.append("file", file);
      this.$axios
        .post("/excel/sangde/importSangde", formdata)
        .then(({ data: res }) => {
          if (res.code != 0) {
            NProgress.done();
            return;
          }
          NProgress.done();
          this.$message.success("上传成功");
        })
        .catch(err => {});
    },
    handleIncreaseUrban(params) {
      NProgress.start();
      var file = params.file;
      this.urbanDataTitle = file.name.slice(0, file.name.indexOf("."));
      localStorage.setItem("urbanDataTitle", this.urbanDataTitle);
      var formdata = new FormData();
      formdata.append("file", file);
      this.$axios
        .post("/excel/sangde/importManage", formdata)
        .then(({ data: res }) => {
          if (res.code != 0) {
            NProgress.done();
            return;
          }

          this.$message.success("上传成功");
          NProgress.done();
        })
        .catch(err => {});
    },
    handleContrast() {
      this.$axios
        .get("/excel/sangde/compare", {})
        .then(({ data: res }) => {
          if (res.code != 0) {
            return;
          }
          this.$message.warning(res.data);
        })
        .catch(err => {});
    },
    handleDownload() {
      NProgress.start();
      this.$axios
        .get("/excel/sangde/repetitionExport", {
          params: {},
          responseType: "blob"
        })
        .then(({ data: res }) => {
          console.log(res, typeof res);
          if (res.type != "application/vnd.ms-excel") {
            NProgress.done();
            return this.$message.warning("没有重复数据");
          }
          if (res.code == 500) {
            NProgress.done();
            return this.$message.error(res.msg);
          }

          if (!res.code) {
            const link = document.createElement("a");
            let blob = new Blob([res], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            let num = "";

            link.setAttribute(
              "download",
              `${localStorage.getItem("sysDataTitle")}-重复.xls`
            );
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.deleteRepeatTitle = localStorage.getItem("sysDataTitle");
            localStorage.setItem("deleteRepeatTitle", this.deleteRepeatTitle);
            NProgress.done();
          }
        })
        .catch(err => {});
    },
    handleDeleRepeat() {
      this.$axios
        .delete("/excel/sangde/deleteRepetitionData", {})
        .then(({ data: res }) => {
          if (res.code != 0) {
            return;
          }
          this.$message.success(res.data);
          console.log(res);
        })
        .catch(err => {});
    },
    handleDownloadContrast1() {
      NProgress.start();
      this.$axios
        .get("/excel/sangde/exportsangdeMoreList", {
          params: {},
          responseType: "blob"
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.type != "application/vnd.ms-excel") {
            NProgress.done();
            return this.$message.warning("没有数据");
          }
          if (res.code == 500) {
            NProgress.done();
            return;
          }

          if (!res.code) {
            const link = document.createElement("a");
            let blob = new Blob([res], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            let num = "";

            link.setAttribute(
              "download",
              `${localStorage.getItem("sysDataTitle")}-城管缺失.xls`
            );
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.contrastResultTitle = localStorage.getItem("sysDataTitle");
            localStorage.setItem(
              "contrastResultTitle",
              this.contrastResultTitle
            );
            NProgress.done();
          }
        })
        .catch(err => {});
    },
    handleDownloadContrast2() {
      NProgress.start();
      this.$axios
        .get("/excel/sangde/exportmanagementMoreList", {
          params: {},
          responseType: "blob"
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.type != "application/vnd.ms-excel") {
            NProgress.done();
            return this.$message.warning("没有数据");
          }
          if (res.code == 500) {
            NProgress.done();
            return;
          }

          if (!res.code) {
            const link = document.createElement("a");
            let blob = new Blob([res], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            let num = "";

            // }
            link.setAttribute(
              "download",
              `${localStorage.getItem("sysDataTitle")}-邦凝缺失.xls`
            );
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.contrastResultTitle = localStorage.getItem("sysDataTitle");
            localStorage.setItem(
              "contrastResultTitle",
              this.contrastResultTitle
            );
            NProgress.done();
          }
        })
        .catch(err => {});
    },
    deleteAllData() {
      this.$axios
        .delete("/excel/sangde/deleteAll", {})
        .then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            return;
          }
          this.$message.success("删除成功");
          localStorage.removeItem("sysDataTitle"),
            localStorage.removeItem("urbanDataTitle"),
            localStorage.removeItem("deleteRepeatTitle"),
            localStorage.removeItem("contrastResultTitle");
          this.sysDataTitle = "";
          this.urbanDataTitle = "";
          this.deleteRepeatTitle = "";
          this.contrastResultTitle = "";
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss">
.box {
  border: 1px solid #666;
  width: 100%;
  height: 100%;
  padding: 20px 20px 40px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.middle,
.bottom {
  border: 1px solid #333;
  width: 100%;
  height: 25%;
  margin-bottom: 20px;
}
.top {
  width: 100%;
  height: 25%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.top-left,
.top-right {
  width: 49%;
  height: 100%;
  border: 1px solid #333;
}
.el-upload--text {
  width: auto !important;
  height: 32px !important;
  border: none;
}
.upload-file {
  margin-top: 5px;
}
</style>
